<!DOCTYPE html>
<html lang="en">
<head>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{margin: 10px auto;}
        ul>li{margin: 10px;}
        h4>a{color: white;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
</head>
<body>
<div class=container>
    <div class="row clearfix">
        <div class=" col-md-7 column">
            <h3>浙江工商大学软件工程系毕业设计提交系统</h3>
        </div>
        <div class="col-md-5 column">
            <ul class="nav nav-pills  navbar-right">
                <li >
                    <a class="btn-primary" href="personal_info.html">个人信息</a>
                </li>
                <li >
                    <a class="btn-danger" href="#">登出</a>
                </li>
            </ul>
        </div>
        <hr />
        <div class="row clearfix">

            <div class="col-md-4 column">
                <div class="list-group">
                    <a href="main.html" class="list-group-item active">学生端</a>
                    <div class="list-group-item">
                        <a href="chose_timu.html" >选题</a>
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            上传
                        </h4>
                        <p class="list-group-item-text">
                            <a href="upload_kaitibaogao.html">上传开题报告</a>
                        </p>
                        <p class="list-group-item-text">
                            <a href="upload_chengguowu.html">上传成果物</a>
                        </p>
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            答辩
                        </h4>
                        <p class="list-group-item-text">
                            <a href="chose_group.html">选择答辩分组</a>
                        </p>
                        <p class="list-group-item-text">
                            <a href="result.html">查看答辩结果</a>
                        </p>

                    </div>
                    <a href="#" class="list-group-item active"> <span class="badge">14</span> 帮助</a>
                </div>
            </div>
            <div class="col-md-8 column">
                <h2 class="text-center">可选小组</h2>
                <div class="row">
                    <table class="table table-hover " id="chose_group">
                    </table>
                </div>
            </div>

        </div>
        <div class="col-md-12 column">
            <table width="990" border="0" align="center" cellpadding="0" cellspacing="0">
                <tbody><tr>
                    <td height="100" align="center" bgcolor="#e4e4e4"><table width="950" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px">
                        <tbody><tr>
                            <td width="817"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody><tr>
                                    <td width="27%" align="left"><img src="../../img/111.gif" width="214" height="38" align="absbottom"></td>
                                    <td width="73%" align="left" style="padding-top:8px"><a href="http://www.miitbeian.gov.cn

" target="_blank" style="color:#999">浙ICP备05073962号</a>　<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011802000512

" style="color:#999">浙公网安备 33011802000512号</a></td>
                                </tr>
                                <tr>
                                    <td height="35" colspan="2" align="left" style="color:#888888">地址：浙江省杭州市下沙高教园区学正街18号　邮编：310018　电话：（86）571-28877777　传真：（86）571-28877222</td>
                                </tr>
                                </tbody></table></td>
                            <td width="143" align="right" valign="bottom"><img src="../../img/222.gif" width="139" height="104"></td>
                        </tr>
                        </tbody></table></td>
                </tr>
                <tr>
                    <td height="19" bgcolor="#807e7f"></td>
                </tr>
                </tbody></table>


        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: '/groups',
                type: 'get',
                data:"",
                dataType: 'json',
                error: function (error) {
                    console.log(error);
                    alert(error);
                },
                success: function (data) {
                    $("#chose_group").html("");
                    var tableStr = "<table>";

                    tableStr = tableStr + "<thead><th>编号</th><th>答辩时间</th><th>目前人数</th><th>可选</th></thead>";
                    for (var i = 0; i < data.length; i++) {
                        tableStr = tableStr + "<tr><td>" + data[i].num + "</td>" + "<td>" + data[i].time + "</td>" + "<td>" + data[i].people + "<td><button class='btn btn-info btn-xs' id='"+data[i].num+"'>选择</button></td></tr>";
                    }
                    tableStr = tableStr + "</table>";
                    //将动态生成的table添加的事先隐藏的div中.
                    $("#chose_group").html(tableStr);
                }
            })}
        )


    </script>
</body>
</html>